<template>
  <div class="home">
   <div v-for="item of musics" :key="item.id" @click="handleToggle(item.id)">
     <img :src="item.coverImgUrl" alt="" class="pic">
     <p>{{item.name}}</p>
   </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import axios from 'axios'
export default {
  name: 'Home',
  setup(){
    const state = reactive({
      musics:[],
      handleToggle(id){
        console.log(id);
        this.$router.push(`/detail?id=${id}`)
      }
    })
    onMounted(()=>{
      axios.get("http://122.112.161.135:3000/top/playlist").then(res=>{
        console.log(res.data.playlists);
        state.musics = res.data.playlists
      })
    })
    const refState = toRefs(state);
    return{
      ...refState
    }
  }
}
</script>
<style scoped>
.home{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.pic{
  width: 150px;
}
.home div{
  width: 150px;
  height: 240px;
  padding: 10px;
}
</style>
